<template>
  <view class="contact-container">
    <view class="contact-card">
      <view class="contact-item">
        <text class="label">客服电话</text>
        <text class="value" @click="makePhoneCall('13141708750')">13141708750</text>
      </view>
      <view class="contact-item">
        <text class="label">客服邮箱</text>
        <text class="value" @click="copyEmail('2997587532@qq.com')">2997587532@qq.com</text>
      </view>
      <view class="contact-item">
        <text class="label">工作时间</text>
        <text class="value">周一至周日 9:00-18:00</text>
      </view>
    </view>

    <view class="qrcode-card">
      <text class="title">关注我们</text>
      <image src="/static/ewm/66313508995ec77627d41a4a1b4f002.jpg" mode="aspectFit" class="qrcode-image"></image>
      <text class="desc">扫码关注公众号获取更多服务</text>
    </view>
  </view>
</template>

<script setup lang="ts">
const makePhoneCall = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone,
    success: () => {
      console.log('拨打电话成功');
    },
    fail: (err) => {
      console.error('拨打电话失败:', err);
    }
  });
};

const copyEmail = (email: string) => {
  uni.setClipboardData({
    data: email,
    success: () => {
      uni.showToast({
        title: '邮箱已复制',
        icon: 'success'
      });
    }
  });
};
</script>

<style>
.contact-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.contact-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
}

.qrcode-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.qrcode-image {
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 20rpx;
}

.desc {
  font-size: 24rpx;
  color: #999;
}
</style> 